<!--
 描述: 环形跑道图
 作者: Jack Chen
 日期: 2020-04-29
-->

<template>
    <div class="wrap-container sn-container">
        <div class="sn-content">
            <div class="sn-title">网格员年龄分布</div>
            <div class="sn-body">
                <div class="wrap-container">
                    <div class="chartsdom" id="chart_run"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "circleRunway",
        data() {
            return {
                option: null,
            }
        },
        mounted() {
            this.getEchart();
        },
        methods: {
            getEchart() {
                // 初始化echarts实例
                let myChart = echarts.init(document.getElementById('chart_run'));

                this.option = {
                    color: ['#3E00F4', '#9B9AF4', '#7C5836', '#62946A', '#6ED2F4'],
                    tooltip: {
                        trigger: 'item'
                    },
                    series: [{
                        type: 'pie',
                        roseType: 'radius',
                        radius: ['30%', '70%'],
                        data: [
                            {
                                value: 210,
                                name: '35岁以下'
                            },
                            {
                                value: 120,
                                name: '36-45岁'
                            },
                            {
                                value: 189,
                                name: '46-54岁'
                            },
                            {
                                value: 129,
                                name: '55-59岁'
                            },
                            {
                                value: 229,
                                name: '60岁以上'
                            }

                        ],
                        label: {
                            normal: {
                                formatter: '{font|{c}人}\n{hr|}\n{font|{b}}',
                                rich: {
                                    font: {
                                        fontSize: 13,
                                        padding: [5, 0],
                                        color: '#14b0ff'
                                    },
                                    hr: {
                                        height: 0,
                                        borderWidth: 1,
                                        width: '100%',
                                        borderColor: '#14b0ff'
                                    }
                                }
                            },
                        },
                        labelLine: {
                            lineStyle: {
                                color: '#14b0ff'
                            }
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0,0,0,0.5)'
                            }
                        }
                    }]
                };
                // 使用制定的配置项和数据显示图表
                myChart.setOption(this.option, true);
                window.addEventListener('resize', () => {
                    myChart.resize();
                });

            },
        },
        beforeDestroy() {

        }
    };
</script>

<style lang="scss" scoped>
    .sn-container {
        left: 10px;
        top: 387px;
        width: 435px;
        height: 30%;
        .chartsdom {
            width: 100%;
            height: 100%;
        }

        .pdt-info {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -1px;
            transform: translate(0%, -50%);
            white-space: nowrap;
            &.info0 {
                margin-top: -160.5px;
                span {
                    &:nth-child(1) {
                        background-color: rgb(0, 114, 188);
                    }
                }
            }
            &.info1 {
                margin-top: -128.5px;
                span {
                    &:nth-child(1) {
                        background-color: rgb(0, 255, 255);
                    }
                }
            }
            &.info2 {
                margin-top: -96.5px;
                span {
                    &:nth-child(1) {
                        background-color: rgb(255, 146, 50);
                    }
                }
            }
            > span {
                font-size: 16px;
                color: #0072bc;
                vertical-align: middle;
                &:nth-child(1) {
                    margin-right: 6px;
                    display: inline-block;
                    width: 12px;
                    height: 12px;
                    border-radius: 50%;
                    box-shadow: 0 0 2em, 0 0 4em, 0 0 6em, 0 0 8em, 0 0 10em, 0 0 0 0.5em rgba(255, 255, 0, 0.1);
                    text-decoration: underline;
                    cursor: pointer;
                    &:hover {
                        color: #00aeef;
                    }
                }
                &:nth-child(2) {
                    font-family: Arial;
                    color: #00aeef;
                }
            }
        }
    }
</style>
